<template>
  <view :class="['trade-filter', { filter: filter }]">
    <scroll-view class="trade-parent" scroll-y="true">
      <view
        :class="['tp-item', { active: item.tradeid === activeParent }]"
        v-for="(item, index) in trade"
        :key="index"
        @click="handleParent(item)"
        >{{ item.tradename }}</view
      >
    </scroll-view>
    <scroll-view class="trade-child" scroll-y="true">
      <view
        :class="['tc-item', { active: item.tradeid === activeChild }]"
        v-for="(item, index) in activeList"
        :key="index"
        @click="handleChild(item)"
      >
        {{ item.tradename }}
        <u-icon
          name="checkbox-mark"
          size="32"
          v-if="item.tradeid === activeChild"
        ></u-icon>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import {trade} from "@/api/modules/company.js"
export default {
  props: {
    formData: Array,
    propList: [Array, String],
    limit: Boolean,
    filter: Boolean,
  },
  data() {
    return {
      trade:[],
      activeParent: "",
      activeChild: "",
      activeList: [],
      defaut: {
        value: "",
        label: "不限",
      },
    };
  },
  created() {
    this.getTradeData();
  },
  methods: {
    getTradeData() {
      trade().then((res) => {
          if (res.code == 200) {
          let list = res.data || [];
          this.trade = list;
          }
        })
    },
    handleParent(item, isEcho) {
      this.activeParent = item.tradeid;
      this.activeList = [];
      if (item.tradeid == "1000" && !isEcho) {
        this.$emit(
          "confirm",item
        );
      } else {
        // getTradeInfo({ totalid: item.value }).then((res) => {
        //   let data = res.data || res;
        //   if (data) {
        //     let childList = [];
        //     for (let key in data) {
        //       childList.push(data[key]);
        //     }
        //     this.activeList = JSON.parse(JSON.stringify(childList));
        //   } else {
        //     this.$emit(
        //       "confirm",
        //       [item.value, item.label, this.activeParent],
        //       this.propList
        //     );
        //   }
        // });
        for(let i=0; i< this.trade.length; i++) {
          if(this.trade[i].tradeid == this.activeParent) {
            this.activeList = this.trade[i].children
            break
          }
        }
        if(!this.activeList.length) {
          this.$emit(
            "confirm",
           item
          );
        }
      }
    },
    handleChild(item) {
      this.activeChild = item.tradeid;
      this.$emit(
        "confirm",
        item
      );
    },
  },
};
</script>

<style lang="scss">
.trade-filter {
  display: flex;
  max-height: 100%;
  background: $uni-bg-color;
  &.filter {
    max-height: calc(60vh - 128rpx);
  }
  .trade-parent {
    padding: 20rpx 0 20rpx 24rpx;
    // width: 40%;
    max-height: 100%;
    overflow: auto;
    background: $uni-bg-color-grey;
    .tp-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      border-radius: 16rpx 0 0 16rpx;
      &.active {
        background: $uni-bg-color;
      }
    }
  }
  .trade-child {
    flex-grow: 1;
    padding: 20rpx 0;
    max-height: 100%;
    overflow: auto;
    .tc-item {
      padding: 24rpx 32rpx;
      line-height: normal;
      &.active {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: $u-type-primary;
      }
    }
  }
}
</style>
